<template>
	<view class="page">
		<view class="searchRow">
			<view class="leftBox">
				<view class="row">
					<view class="label">
						开始时间:
					</view>
					<view class="val" @click="beginTimeShow=true">
						{{form.beginTime ? form.beginTime : '请选择' }}
					</view>
				</view>
				<view class="row">
					<view class="label">
						结束时间:
					</view>
					<view class="val" @click="endTimeShow=true">
						{{form.endTime ? form.endTime : '请选择' }}
					</view>
				</view>
			</view>
			<view class="btn" @click="goSearch">
				查询
			</view>
		</view>
		<view class="tabs">
			<u-tabs :list="tabArr" lineWidth="35" @click="changeTab" :itemStyle="{width:'33vw;',height:'54rpx;'}"></u-tabs>
		</view>
		<scroll-view scroll-y="true" style="height: calc( 100vh - 312rpx )" @scrolltolower="loadMord">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click="handleItem(item)">
					<view class="leftBox">
						<view class="type">
							{{item.category == 1 ? '事假' : '病假'}}
						</view>
						<view class="row">
							<text>请假时间:</text> {{item.begTime}} - {{item.endTime}} 
						</view>
						<view class="row">
							<text>请假事由:</text> {{item.subjectContent}}
						</view>
					</view>
					<view class="btnRow" v-if="activeTab==1">
						<view class="btn">
							审批
						</view>
					</view>
				</view>
				<u-empty mode="list" v-if="!list.length" text="暂无数据">
				</u-empty>
			</view>
		</scroll-view>
		<u-modal :show="handleShow"  title="审批" cancelText="取消"  showCancelButton
		  @confirm="confirmItem" @cancel="handleShow=false">
				<view class="slot-content">
					<view class="" style="margin-top: 20rpx;">
						<u-radio-group
						    v-model="status"
						    placement="row">
							<u-radio name="2" label="通过" ></u-radio>
							<u-radio name="3" label="不通过" :customStyle="{marginLeft: '20rpx'}"></u-radio>
						</u-radio-group>
					</view>
					<view class="" style="display: flex;width: 500rpx;margin-top: 20px;">
						<view class="" style="margin-top: 20rpx;">
							备注：
						</view> <u--textarea v-model="remark" placeholder="请输入备注" ></u--textarea>
					</view>
					
				</view>
		</u-modal>
		<u-datetime-picker
		    :show="beginTimeShow" ref="datetimePicker" v-model="beginTime" 
		    mode="date"  @cancel="beginTimeShow=false" @confirm="beginTimeConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endTimeShow" ref="datetimePicker" v-model="endTime" 
			mode="date"  @cancel="endTimeShow=false" @confirm="endTimeConfirm"
		   ></u-datetime-picker>
	</view>
</template>

<script>
	import {queryAsksPage,eltMemberAsksWrittenApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				form:{
					currPage : 1,
					pageSize : 10,
					beginTime : '',
					endTime : '',
					mainframeNo : uni.getStorageSync('selectInfoAccount').mainframeNo,
					status : ''
				},
				list: [],
				beginTime: Number(new Date()),
				endTime: Number(new Date()),
				beginTimeShow : false,
				endTimeShow : false,
				tabArr : [
					{
						name: '待处理',
						val: 1
					},
					{
						name: '通过',
						val: 2
					},
					{
						name: '未通过',
						val: 3
					},
				],
				activeTab: 1,
				total: '',
				handleShow: false,
				remark: '',
				status: '2',
				selectItem: '',
				total : '',
			}
		},
		methods: {
			confirmItem(){
				eltMemberAsksWrittenApi({
					id : this.selectItem.id,
					remarks : this.remark,
					status : this.status
				}).then(res=>{
					this.form.currPage = 1
					this.handleShow = false
					this.getList().then(res=>{
						this.status = '2'
						this.setMessage('操作成功')
					})
				})
			},
			handleItem(item){
				if(this.activeTab !=1 ) return
				this.selectItem = item
				console.log(this.selectItem);
				this.handleShow = true
			},
			changeTab(item){
				console.log(item);
				this.activeTab = item.val
				this.goSearch()
			},
			goSearch(){
				this.form.currPage = 1
				this.getList()
			},
			loadMord(){
				if(this.total==this.list.length) return this.setMessage('没有更多数据了！')
				this.form.currPage++
				this.getList()
			},
			beginTimeConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.form.beginTime = date
				this.beginTimeShow = false
			},
			endTimeConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.form.endTime = date
				this.endTimeShow = false
			},
			getList(){
				let form = this.form
				form.status = this.activeTab
				if(!form.beginTime) delete form.beginTime
				if(!form.endTime) delete form.endTime
				return queryAsksPage(form).then(res=>{
					if(this.form.currPage==1) this.list = []
					this.list = this.list.concat(res.page.list)
					this.total = res.page.totalCount
					this.list.forEach(item=>{
						item.begTime = item.begTime.split(' ')[0]
						item.endTime = item.endTime.split(' ')[0]
					})
					
				})
			}
		},
		mounted() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f8f8f8;
	height: 100vh;
	.searchRow{
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 2rpx solid #dedede;
		.leftBox{
			flex: 1;
			.row{
				display: flex;
				align-items: center;
				height: 70rpx;
				.label{
					margin-right: 30rpx;
				}
				.val{
					
				}
			}
		}
		.btn{
			width: 140rpx;
			height: 56rpx;
			border-radius: 10rpx;
			color: #fff;
			@include flexCenter;
			background-color: #4089f0;
		}
		
	}
	
	.tabs{
		height: 70rpx;
		margin-top: 20rpx;
	}
	.list{
		margin-top: 20rpx;
		border-top:  2rpx solid #eaeaea;
		.item{
			padding: 20rpx 40rpx;
			width: 100%;
			border-bottom:  2rpx solid #eaeaea;
			.leftBox{
				.type{
					font-weight: 600;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
				.row{
					margin-bottom: 5rpx;
					text{
						margin-right: 20rpx;
						color: #000;
					}
				}
			}
			.btnRow{
				display: flex;
				justify-content: flex-end;
				.btn{
					width: 90rpx;
					height: 50rpx;
					border-radius: 10rpx;
					color: #fff;
					@include flexCenter;
					background-color: #4089f0;
				}
			}
			
		}
	}
	
}
</style>
